<template>
<div>
  <div class="tapy">
    <div class="bgc-txt" >
      

      <!-- 导航 -->
      <div class="NavBar">
    <van-nav-bar
 
  left-arrow
  @click-left="onClickLeft"
 
/>
</div>

<div class="dispads">
  <!-- 左边部分 -->
        <div  class="disply">
        <!-- 标题 -->
         <div class="biaotzy">
          <div>
        <div class="title">
          <h2>{{datas.name}}</h2>
        </div>



        
       <!-- 公司性质 -->
       <div class="gsxzi">
    <van-tag plain>{{datas.type}}</van-tag>
    <van-tag plain>{{datas.step}}</van-tag>
    <van-tag plain>{{datas.scale}}</van-tag>
        </div>
</div>
<!-- 右边部分  公司头像-->
    <div class="imgsts">

        <img :src= logo alt="">
  
    </div>
    </div>



        <!-- 在公司时间 -->
<div class="text-qysj">
  <div >
    <van-icon name="underway-o" />
    <span>{{datas.workTime}}</span>
  </div>
   <div>
  <van-icon name="cashier-o" />
    <span>{{datas.restDay}}</span>
  </div>
   <div>
  <van-icon name="desktop-o" />
    <span>{{datas.overtime}}</span>
  </div>
</div>

    </div>



</div>

<!-- <i v-for="(item, index) in datas.weals" :key="index" :class= item.icon ></i> -->
<div class="btn-det">
   <div class="butt">
  <van-button  size="normal" v-for="(item, index) in datas.weals" :key="index" :icon= iconsda(item.text)  plain type="default">
   <!-- <i :class= iconfont item.icon   > </i> -->
   {{item.text}}
  </van-button>
  <!-- <i    v-for="(item, index) in datas.weals" :key="index"  :class= item.icon></i> -->
     </div> 
</div>

    </div>
    <!-- <div v-for="(item, index) in datas.sliders" :key="index">
      <img :src= imgst(item) alt="">
    </div> -->
    <!-- //图片部分 -->
    <!-- <div class="ingits"> -->
<!-- <div class="imgsfilt" >
  <img :src= logo alt="">
</div> -->
<!-- <div class="imgsfilt" :style="{ background:`url(${logo}) no-repeat`}"> -->

    <!-- </div> -->
    <!-- 公司地址 -->
    <div  class="companysss">
     <div class="text-gsdz">
<div>
      <div class="gsdzs">公司地址</div>
      <div class="tibac">{{datas.address}}</div>
      <div class="juli"> 距离但前{{datas.questions}}m步行需要{{datas.positions}}秒</div>
</div>
      <div>
    <div>
      <span @click="alrtd('已经是全部地址了')">全部地址</span>
      <van-icon name="arrow" />
  </div>
  <div class="tibac"  >
<van-button round  icon="guide-o" @click="alrtd('敬请期待')">导航</van-button>
  </div>
      </div>
    </div>
  

  <!-- 公司简介 -->
  <div class="profiless">
    <div class="profiless-gsjj">
      <div>公司简介</div>
    </div>

    <div v-html= datas.desc ></div>
  </div>



</div>
    </div>
    <div class="pjiashexia">
       <!-- 公司照片 -->
   <div class="profiless-imgers">

    <div class="profiless-text">
      公司照片
    </div>

    <div>
      <div class="imgs-profiles">
        <div class="imgs-width">
          <div class="imgst-each"  v-for="(item, index) in datas.sliders" :key="index" >
        <img :src= imgst(item) alt="">
          </div>
        </div>
      </div>
    </div>

   </div>


     <!-- 工商信息 -->
     <div class="gszhuxx">
      <div class="gsxx-text">工商信息</div>
      <ul>
        <li><span>公司全称</span>{{datas.fullname}}   </li>
        <li><span>成立时间</span>{{datas.establishedTime}}   </li>
        <li><span>注册资本</span>{{datas.capital}}   </li>
        <li><span>法人代表</span>{{datas.legalPerson}}   </li>
        <li><span>信息来源</span>{{datas.messageSource}}   </li>
      </ul>
     </div>

<!-- 面试评价 打分-->


  <div class="hmmm-mspj">

<div class="hmmm-titin-text">
    <div >
      面试评价
    </div>
  <div>写评价</div>
</div>


<div class="batst">

  <div class="cssbst">
  <div class="dafen-text">
    <span>{{datas.score.interviewerScore}}</span>
    分
  </div>
  <van-rate
  v-model="datas.score.interviewerScore"
  :size="20"
  color="#ffd21e"
  void-icon="star"
  void-color="#eee"
/>
</div>



<div class="bcacsss">
<ul>
  <li><span>岗位描述</span>  <van-rate
  v-model="datas.score.interviewScore"
  :size="14"
  color="#ffd21e"
  void-icon="star"
  void-color="#eee"
/>
</li>
  <li><span>岗位情况</span>  <van-rate
  v-model="datas.score.interviewerScore"
  :size="14"
  color="#ffd21e"
  void-icon="star"
  void-color="#eee"
/>
</li>
  <li><span>面试官</span>  <van-rate
  v-model="datas.score.positionScore"
  :size="14"
  color="#ffd21e"
  void-icon="star"
  void-color="#eee"
/>
</li>
</ul>
</div>

</div>


  </div>

<!-- 面试评价评价 -->
<div>

  <div class="mianshipjia-text" v-for="(item, index) in datalist" :key="index"    >
<!-- 图片 -->
    <img :src= imgst(item.user.avatar)   alt="">
<!-- 右边部分 -->
    <div class="mianspj-dav">

      <div class="hmmmm-ssss">
      <div>{{item.user.nickname}}</div>
      <div class="mianshixitiyan">{{item.position}}</div>
        <div class="mianshitiyanmsg"> {{item.tags[0]}}{{item.tags[1]}}</div>
        <div class="hmmm-msjsjshuzi">{{item.content}}</div>
      </div>

  <van-rate
  v-model="datas.score.interviewerScore"
  :size="10"
  color="#ffd21e"
  void-icon="star"
  void-color="#eee"
/>

    </div>

  </div>

</div>



</div>

<div class="ssdsds">
  <van-goods-action  >
 
  <van-goods-action-button  @click="$router.push(`/recruitment/${datas.id}`)" type="warning" text="在线招聘" />
  <van-goods-action-button color="#7232dd"   @click="$router.push(`/interviews`)"  type="danger" text="企业面试题" />
</van-goods-action>
</div>

<div class="bottu">已经到底了</div>
 </div>
</template>

<script>
import imgjj from './imgsdt'
import {companiesAPI ,cmpdetailsAPI} from '@/api/company'
export default {
name:'DeTails',
data() {
  return {
    //图片
    logo:'',
    //第一个数据
    datas:{
      score:{
interviewScore: 0,
interviewerScore: 0,
positionScore: 0
      }
    },
    // 获取第二个数据的id
    pjdata:{
      id:'',
      //起始数
      start:0,
      //多少个
      limit:999
    },
    datalist:[
      
    ]
  }
},
created(){
  this.logdatad()
},
methods:{
 
  //筛选出图标
  iconsda(name){
    
  const res= imgjj.imgs.filter(v=>v.name=== name)
  if(res==''){
    // console.log(res);
    return 'like-o'
  }
  // console.log('图标',  res);
  return res[0].value
  },
  //初始数据
  async  logdatad(){
  const res =    await  companiesAPI(this.$route.params.id)
  
  console.log('想要获取到的数据',   res);
  this.datas=res.data
this.logo= this.imgst(res.data.logo)
// console.log(this.logo);
this.pjdata.id=this.datas.id
const res2= await cmpdetailsAPI(this.pjdata)
console.log('res2',res2);
this.datalist=res2.data.list

    },
        onClickLeft() {
      // Toast('返回');
      this.$router.back()
    },

}
}
</script>

<style lang="less" scoped>
.ssdsds{
  width: 374px;
}
 .span{
  // display: inline;
  padding: 0;
} 
*{
  box-sizing: border-box;
}
.pjiashexia{
  padding: 0 10px;
  .mianshipjia-text{
    display: flex;
    margin-top: 20px;
.mianspj-dav{
  display: flex;
  margin-left: 40px;
  justify-content: space-between;
  .hmmmm-ssss{

  width: 200px;
  .hmmm-msjsjshuzi{
    margin-top: 30px;
  }
  .mianshitiyanmsg{
   background-color: #b4b4bd;
   color: #b4b4bd;
   background: #f7f4f5;
font-size: 16px;
    font-weight: 400;
  }
  .mianshixitiyan{
    // font-size: 14px;
    color: #b4b4bd;
    font-weight: 400;
  }
  }
}
    img{
      height: 40px;
      width: 40px;
      border-radius: 50%;
      background-color: #00b8d4;
    }
  }
  .hmmm-mspj{
    .batst{ 
      display: flex;
      justify-content: space-between;
      margin-top: 10px;
      height: 120px;
      align-items: center;
    background: #f7f7f7;
      .bcacsss{
     ul{
      height: 120px;
      line-height: 40px;
     }
      }
      .cssbst{
margin-left: 20px;
.dafen-text{
  span{
    font-size: 40px;
    margin-left: 20px;
    color: #00b8d4;
  }
}
 }
    }
.hmmm-titin-text{
  font-size: 20px;
  display: flex;
  margin-top: 10px;
  justify-content: space-between;
  font-weight: 500;
}
  }
  .gszhuxx{
    margin-top: 10px;
    .gsxx-text{
      font-size: 20px;
      margin-bottom: 10px;
    }
    ul{
      span{
            color: #b4b4bd;
        margin-right: 30px;
      }
    }

  }
.profiless-imgers{
  margin-top:15px ;
  .profiless-text{
    margin-bottom: 10px ;
    font-size: 20px;
  }
  .imgs-profiles{
    width: 373px;
     overflow: auto;
.imgs-width{
width: 999px;
 
  display: flex;
.imgst-each{

  img{

    margin-right: 5px;
    width: 160px;
     height: 80px;
  }
}
   }
  }
}
}
.tapy{
  .companysss{
 padding: 0 10px;
  
  .profiless{
    margin-top: 90px;
   
    .profiless-gsjj{
      margin-bottom: 10px;
      font-size: 20px;
    }
  }

    .text-gsdz{
    display: flex;
    justify-content: space-between;
    padding-top: 240px;
    height: 10px;
    .gsdzs{
      font-size: 5.4vw;
    }
    .tibac{
      // margin: top 10px; ;
      margin-top: 10px;
      font-size: 17px;
    }
    .juli{
      font-size: 12px;
    }
  }
  }
  // color="#7232dd"
  // background-color: peru;
  position: relative;
  width: 373px;
.ingits{
  position:fixed ;
  top: 0;
  left: 0;
   height: 375px;
    width: 373px;
   .imgsfilt{
    // margin: 0 auto;
 filter: blur(1.06667vw);
     opacity: .41;
// background: rgba(0, 0, 0, .8) ;
// width: 100%;
height: 375px;
max-width: 373px;
max-height:100% ;
img{
  // width: 375px;
  width: 400px;
}
    }
}
::-webkit-scrollbar{
  display: none;
}
::v-deep button.van-button.van-button--info.van-button--normal.van-button--plain {
    margin-right: 3px;
}
  .bgc-txt{
    // padding: 8px;
position: absolute;
      height: 240px;
      // padding: bottom 240px; ;
      padding-bottom: 240px;
      width: 100%;
      

    .btn-det{
      width: 373px;
        // overflow:hidden;
    overflow-x: auto;
    // display: none;
    // overflow-y: hidden;
         .butt{

      display: flex;
      width: 700px;
    
      // justify-content: center;
    }
    }
 
}
::v-deep  .van-tag--plain{
  margin-right: 4px;
}

.dispads{
  // display: flex;
  .disply{
  .text-qysj{
    margin-top: 6px;
    display: flex;
    font-size: 14px;
    *[data-v-4bd6cd6e]{

  margin-right: 4px;
    span{
      font-size: 14px;
     
    }
    }
  }
  .biaotzy{
display: flex;
    justify-content: space-between;
    // align-items: center;
  .imgsts{
  width: 80px;
  height: 80px;
  margin-right: 40px;
  // padding:150px;
  // margin-bottom: 20px;
  // overflow:hidden;
  img{
    width: 80px;
  height: 80px;
  }
}

  }

}

}

}

.bottu{
  padding-top: 40px;
  text-align: center;
}
</style>